import React from 'react';
import { message, Form, Tabs, Button, Layout, Input, Menu, Icon, Tree, Spin, Radio } from 'antd';
import styles from '../../style.less';

import {
  addDbInfoApi,
} from '../service';

const { TextArea } = Input;
const FormItem = Form.Item;

class DatabaseInfo extends React.Component {
  state = {
    databaseInfo: {},
    loading: false,
  };

  dbId = '';

  constructor(props, context) {
    super(props, context);

    // this.dbId = this.props.dbId;
    // console.info('this.dbId=' + this.dbId);
    //
    // window.onhashchange = () => {
    //   this.dbId = this.props.match.params.dbId;
    //   this.fetchDatabaseInfo();
    // };
  }

  componentDidMount() {
    this.fetchDatabaseInfo();
  }

  fetchDatabaseInfo = () => {
    let that = this;
    const {
      form: { setFieldsValue },
    } = this.props;
    if (this.dbId === '') {
      this.setState({ ...this.state, databaseInfo: {} });
    } else {
      fetchDbInfoApi(this.dbId).then(res => {
        this.setState({ ...this.state, databaseInfo: res.data.data });

        that.props.form.resetFields();
        setFieldsValue(res.data.data);
      });
    }
  };

  asyncDbToProFromDbBase = () => {
    this.setState({ loading: true });
    asyncDbToProFromDbBaseApi(this.dbId).then(res => {
      this.setState({ loading: false });
    });
  };

  saveDatabaseInfo = () => {
    let that = this;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let formData = that.props.form.getFieldsValue();
        console.log(that.dbId)
        if (that.dbId > 0) {
          formData.id = that.dbId;
          modifyDbInfoApi(formData).then(res => {
            message.success('保存成功！');
          });
        } else {
          addDbInfoApi(formData).then(res => {
            message.success('添加成功！');
            //that.dbId = res.data.id;
          });
        }
      }
    });
  };

  render() {
    const { form :{getFieldDecorator},databaseDetail } = this.props;
    const { loading, databaseInfo } = this.state;

    const formItemLayout = {
      labelCol: {
        sm: { span: 6 },
      },
      wrapperCol: {
        sm: { span: 18 },
      },
    };

    return (
      <Spin spinning={loading} delay={500}>
        <Form className={styles.form_item_margin_bottom4 + ' ' + styles.form_row_small_margin} onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="数据库名">
            {getFieldDecorator('dbName', {
              initialValue: databaseDetail.dbName,
              rules: [{ required: true, message: '数据库名不可为空' }],
            })(<Input className={'ant-col-12'} />)}
            <span className="ant-form-text"> 数据库名(英文字母) </span>
          </FormItem>

          <FormItem {...formItemLayout} label="用户名">
            {getFieldDecorator('username', {
              initialValue: databaseDetail.username,
              rules: [{ required: true, message: '用户名' }],
            })(<Input className={'ant-col-12'} />)}
            <span className="ant-form-text"> 用户名 </span>
          </FormItem>

          <FormItem {...formItemLayout} label="密码">
            {getFieldDecorator('password', {
              initialValue: databaseDetail.password,
              rules: [{ required: true, message: '密码不可为空' }],
            })(<Input className={'ant-col-12'} />)}
            <span className="ant-form-text"> 密码 </span>
          </FormItem>

          <FormItem {...formItemLayout} label="hostname">
            {getFieldDecorator('hostname', {
              initialValue: databaseDetail.hostname,
              rules: [{ required: true, message: 'hostname不可为空' }],
            })(<Input className={'ant-col-12'} />)}
            <span className="ant-form-text"> hostname </span>
          </FormItem>

          <FormItem {...formItemLayout} label="port">
            {getFieldDecorator('port', {
              initialValue: databaseDetail.port,
              rules: [{ required: true, message: 'port' }],
            })(<Input className={'ant-col-12'} />)}
            <span className="ant-form-text"> port </span>
          </FormItem>
          <FormItem {...formItemLayout} label="是否多租户">
            {getFieldDecorator('tenant', {
              initialValue: databaseDetail.tenant,
              rules: [{ required: true, message: 'tenant' }],
            })(
              <Radio.Group>
                <Radio value="true">是</Radio>
                <Radio value="false">否</Radio>
              </Radio.Group>,
            )}
            <span className="ant-form-text"> tenant </span>
          </FormItem>

          <FormItem {...formItemLayout} label=" ">
            <Button
              style={{ marginRight:10}}
              onClick={() => {
                this.saveDatabaseInfo();
              }}
              type="info"
            >
              保存
            </Button>
            <Button
              onClick={() => {
                this.asyncDbToProFromDbBase();
              }}
              type="primary"
            >
              同步数据库到项目
            </Button>
          </FormItem>
        </Form>
      </Spin>
    );
  }
}

export default Form.create()(DatabaseInfo);
